<template>
  <div id="home">
    <!--  -->
    <header>
    <h1>饿了么</h1>
        <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" background="blueviolet" shape="round" @focus='$router.push("/search")'/>
    </header>

    <!--  -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="300px">
        <van-swipe-item v-for="(item,index) in img" :key="index" >
            <img v-lazy="item.bannerUrl" height="100%" width="100%" />
        </van-swipe-item>
    </van-swipe>
    <!--  -->
    <List/>
  </div>
</template>

<script>
import { banner_list } from '@/utils/api';
import  List  from '../../components/List.vue';
export default {
    components:{List},
    data() {
        return {
        value: '',
        img:[]
        };
    },
    mounted(){
        banner_list().then((res)=>{
            this.img=res.data.list;
        })
    }
}
</script>

<style lang="scss" scoped>
    header{
        background-color: blueviolet;
        h1{
            color: white;
            font-weight: 400;
            margin: 0 0 5px 15px;
        }
    }
    .my-swipe{
        height:150px;
        width: 96%;
        margin: 10px auto;
        border-radius:20px;
            .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }
    }

</style>